<script setup>
import useFenLeiPinia from '@/stores/models/useFenLeiPinia';
import useTextPinia from '@/stores/models/useTextPinia'
import addWenZhang from '@/components/addWenZhang.vue'
import getfenLeiString from '@/components/getFenlLeiString'
import { ref } from 'vue'
import {useAllText,useTextList,useDelText} from '@/api/textApi'
import xuanRanTextList from '@/utils/xuanRanTextList'
import xuanRanFenLeiString from '@/utils/xuanRanFenLeiString'

const fenLeiPinia = useFenLeiPinia()
const textPinia = useTextPinia()
// 用来装分类数据的盒子
// const fenLeiBox = ref(null)
// 拿到文章数据,textPinia.textList就是数据
// 用来装文章数据的盒子
const textBox = ref(textPinia.textList)
// 判断是否打开文章弹框
const isShowAddText = ref(false)
// 传递子组件数据的盒子
const postChildText = ref({})
// 判断筛选内容是否有数据
const isNoneText = ref(false)
// 加载
const loading = ref(false)

// .............................

// 一进页面的逻辑
const firstFun = async () => {
  // loading.value = true
  // textBox.value = await xuanRanTextList()
  // loading.value = false
}
firstFun()
// .............................

// 添加或修改数据的逻辑
const updateTextList = (id) => {
  isShowAddText.value = true
  if (id) {
    // 修改逻辑，向子组件传值让他回显数据
    const getMoreText = async () => {
      postChildText.value = await useAllText(id)
      console.log('42postChildText.value',postChildText.value)
      console.log('43执行到这里代表把数据传给子元素了')
    }
    getMoreText()
  }else {
    // 添加逻辑
    postChildText.value = {
      title: '',
      cover_img: '',
      content: '',
      cate_id: 0
      // title: '',
      // title: ''
    }
    console.log('postChildText.value',postChildText.value)
  }
}
  // 子组件提交成功，告诉父组件刷新页面
  const ChildSuccess = async () => {
    loading.value = true
    // console.log('告诉父亲修改或添加成功了,视图没更新前的值',textBox.value)
    // const textPinia1 = useTextPinia()
    textBox.value = await xuanRanTextList()
    // console.log('视图更新后的值',textPinia1.textList)
    loading.value = false
  }
// .............................

// 删除操作
const delIdText = async (id) => {
  loading.value = true
  console.log('开始删除了',id,textBox.value)
  textBox.value = textBox.value.filter(item => item.id !== id)
  await useDelText(id)
  console.log('74删除操作成功,textBox.value值',textBox.value)
  loading.value = false
}

// .............................

// 搜索筛选
const searchtextList = async () => {
  loading.value = true
  const minFenLei = document.querySelector('.selFenLei')
  const minStatus = document.querySelector('.selZhuangTai')
  console.log('96获得小方块数据',minFenLei.value,minStatus.value)
  textBox.value = await useTextList(minFenLei.value,minStatus.value)
  console.log('98获取分类文章成功',textBox.value)
  // if (textBox.value.length === 0){
  //   isNoneText.value = true
  // } else{
  //   isNoneText.value = false
  // }
  loading.value = false
}

// .............................

// 重置筛选
const reset = async () => {
  loading.value = true
  textBox.value = await xuanRanTextList()
  loading.value = false
}


</script>

<template>
  <div class="maxBox"
  v-loading="loading"
  element-loading-text="拼命加载中..."
  element-loading-spinner="el-icon-loading"
  element-loading-background="rgba(0, 0, 0, 0.7)"
  >
    <div class="top">
      <div class="title">文章管理</div>
      <button class="btn myBtn" @click="updateTextList(null)">
        发布文章
      </button>
    </div>
    <!-- 筛选开始 -->
    <div class="shaiXuan">
      <div class="wenZhangFenLei">
        <span>文章分类：</span>
        <select name="" id="" class="selFenLei">
          <!-- <option value='0' disabled selected>全部</option> -->
          <option :value=item.id v-for="item in fenLeiPinia.fenLeiString" :key = item.id>{{ item.cate_name }}</option>
          <!-- <option value="2">2</option>
          <option value="3">3</option> -->
        </select>
      </div>
      <div class="faBuZhuangTai">
        <span>发布状态：</span>
        <select name="" id="" class="selZhuangTai">
          <!-- <option value='0' disabled selected>全部</option> -->
          <option value="已发布">已发布</option>
          <option value="草稿">草稿</option>
        </select>
      </div>
      <div class="btns">
        <button class="souSuo minBtn" @click="searchtextList">搜索</button>
        <button class="chongZhi minBtn" @click="reset">重置</button>
      </div>
    </div>
    <!-- 筛选结束 -->
    <table class="table">
      <tr>
        <th>文章标题</th>
        <th>分类</th>
        <th>发表时间</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      <!-- 第一行 -->
      <tr class="tr" v-for="item in textBox" :key = item.id>
        <td>{{ item.title }}</td>
        <td>{{ item.cate_name }}</td>
        <td>{{ item.pub_date }}</td>
        <td>{{ item.state }}</td>
        <td class="useIcon">
          <span class="bianJi" @click="updateTextList(item.id)">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-bianji">
              </use>
            </svg>
          </span>
          <span class="shanChu" @click="delIdText(item.id)">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shanchu">
                </use>
            </svg>
          </span>
        </td>
      </tr>
    </table>
    <div class="noneText" v-show="!textBox.length">
        暂无内容
      </div>

    <addWenZhang
      v-model:isShowAddText="isShowAddText" 
      v-model:postChildText="postChildText"
      v-if="isShowAddText"
      @success = ChildSuccess()
    ></addWenZhang>


  </div>
</template>

<style scoped>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .maxBox {
    width: 980px;
    min-height: 1000px;
  }
  /* top样式开始 */
  .top {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title {
    width: 200px;
    height: 100%;
    text-align: center;
    line-height: 80px;
    font-weight: 700;
    color: black;
    font-size: 40px;
  }
  .myBtn {
    cursor: pointer;
  }
  /* top样式结束 */

  /* 筛选开始 */
  .shaiXuan {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
  }
  /* 下拉框 */
  select {
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    background-color: rgba(33, 150, 243,0.4);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease; /* 添加过渡动画 */
  }
  select:hover {
    box-shadow: 0 0 8px rgba(33, 150, 243) !important;
  }
  select:focus {
    outline: none;
  }
  select option {
    background-color: rgb(88, 173, 243,0.5);
    border-radius: 10px;
  }
  select option:hover {
    background-color: rgba(232, 86, 28, 0.8);
  }
  .wenZhangFenLei {
    width: 300px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .faBuZhuangTai {
    width: 300px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btns {
    width: 300px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .selFenLei, .selZhuangTai {
    width: 150px;
    height: 40px;
  }
  .souSuo, .chongZhi {
    margin: 1px;
    cursor: pointer;
  }
  
  /* 筛选结束 */


  /* table开始 */
.noneText{
  height: 100px;
  line-height: 100px;
  font-size: 40px;
  text-align: center;
  width: 980px;
}
  .table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 20px;
}

.table th,
.table td {
  padding: 12px 15px;
  border: none;
  border-bottom: 1px solid #4896b8;
  height: 100px;
}

.table th {
  border-bottom: 1px solid #4896b8;
  font-weight: 600;
  font-size: 18px;
}

.table td {
  font-size: 16px;
}
.tr:hover {
  background-color: rgb(36, 121, 212,0.3);
}
.table tr:last-child td {
  border-bottom: none;
}
.shanChu,.bianJi  {
  font-size: 20px;
  line-height: 45px;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: block;
  cursor: pointer;
  border: 1px solid;
  margin: 1PX;
  transition: all 0.3s ease; /* 添加过渡动画 */
}
.shanChu:hover {
  background-color: rgb(255, 0, 0);
}
.bianJi:hover {
  background-color: rgb(36, 121, 212);
}
.useIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* border-bottom: 1px solid #eee; */
}
  /* table结束 */
</style>